<template>
  <form-dialop
    :title="$t('order.messageDetailTile')"
    :visible="visible"
    width="40%"
    @handleClose="handleClose"
  >
    <template #content>
      <div :class="'content'">
        <el-descriptions title="" :column="num" border>
            <el-descriptions-item v-for="(k,v) in showData" :label="v" :key="v">{{k}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <template #footer>
      <div>
        <span style="font-size: 12px;">{{$t('common.pageClassifier', { total: dataTotal }) }}</span>
      </div>
      <div class="order-page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="1"
            layout="prev, pager, next, jumper"
            :total="dataTotal">
        </el-pagination>
      </div>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../store/modules/app';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      allData: '',
      otherData: '',
      num: 1,
      arrayData: [],
      dataTotal: 1,
      currentPage: 1,
      showData: '',
    }
  },
  created() {
  },
  methods: {
    async init(data: any) {
        this.allData = JSON.parse(JSON.stringify(data));
        this.otherData = JSON.parse(JSON.stringify(this.allData));
        this.arrayData = []
        for(let i in (this as any).allData) {
            if(Array.isArray((this as any).allData[i])){
                this.arrayData = (this as any).allData[i];
                delete (this as any).otherData[i];
                this.dataTotal = (this as any).arrayData.length + 1;
                break;
            }
        }
        this.showData = this.otherData;
        this.visible = true;
    },
    handleSizeChange(val: any) {},
    handleCurrentChange(val: any) {
        if(val > 1) 
            this.showData = this.arrayData[val - 2]
        else if(val <= 1) {
            this.showData = this.otherData;
        }
    },
    handleClose() {
        this.arrayData = [];
        this.dataTotal = 1;
        this.currentPage = 1;
        this.visible = false;
        this.loading = false;
    }
  }
})
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  word-break: normal !important;
}

.content {
    max-height: 400px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
}

.order-page {
  ::v-deep .el-pagination {
    .el-pager {
      height: 32px;
      .number {
        height: 32px;
        line-height: 32px;
      }
    }

    .btn-prev, .btn-next {
      height: 32px;
    }

    .el-pagination__jump {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
